<template>
	<view style="position: relative;">
		<u-select v-model="show" mode="mutil-column-auto" :list="areaList" :default-value="defaultAreaIndex"
			@confirm="confirm" @cancel="show = false" />
		<view class="mian-box">
			<scroll-view style="height: calc(100vh - 30px);background-color: #ededed;" class="scroll-Y" ref="sro"
				id="sro" @scrolltolower="getOrderList(false)" scroll-y="true" :scroll-top="scrollTop">
				<view class="t-box">
					<view v-for="(item,index) in typeList" :key="index" class="t-item" @click="selectType(item.name)">
						<view>
							<image class="t-img" :src="item.iconUrl"></image>
						</view>
						<view style="text-align: center;font-size: 12px;">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="c-box">
					<view style="display: flex;width: 65%;" @click="chooseArea">
						<view>
							{{areaName1}}<u-icon style="margin-left: 5px;" name="arrow-down-fill" color="#ccc"
								size="28"></u-icon>
						</view>
						<view style="margin-left: 40px;">
							{{areaName2}}<u-icon style="margin-left: 5px;" name="arrow-down-fill" color="#ccc"
								size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="f-box">
					<view class="f-item" v-for="(item,index) in infoList" :key="index" @click="toDetail(index)">
						<view>
							<image class="f-img" :src="item.defaultImgUrl"></image>
						</view>
						<view style="padding: 5px;">
							<view class="f-txt">
								{{item.title}}
							</view>
							<view class="f-label">
								<view>{{item.typeName}}</view>
							</view>
							<view class="f-bottom">
								<view style="display: flex;">
									<view>
										<image style="width: 16px; height: 16px;margin-right: 4px;"
											src="/static/imgs/map.png">
										</image>
									</view>
									<view>{{item.areaName}}</view>
								</view>
								<view style="display: flex;">
									<view>
										<image style="width: 16px; height: 16px;margin-right: 4px;"
											src="/static/imgs/zan.png">
										</image>
									</view>
									<view>{{item.likeNum}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="fu-box">
			<view style="display: flex;justify-content: center;">
				<view style="width: 120px;margin-right: 10px;">
					<u-button size="default" :custom-style="customStyle1" shape="circle" @click="add">一手加入</u-button>
				</view>
				<view style="width: 120px;margin-right: 10px;">
					<u-button size="default" :custom-style="customStyle2" shape="circle"
						@click="publish">我的发布</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		localTypeApis,
		orderApis
	} from '@/apis/index'
	export default {

		onLoad() {
			var that = this
			uni.$on('orderFresh', (flag) => {
				that.load()
			});
		},
		data() {
			return {
				show: false,
				selectedProvince: '', // 保存上次选择的省
				selectedCity: '', // 保存上次选择的市
				defaultAreaIndex: [0, 0], // 用于记忆上次选择的位置
				areaName1: '选择地区',
				areaName2: '选择地区',
				infoList: [],
				customStyle1: {
					backgroundColor: '#ffa100',
					color: '#fff'
				},
				customStyle2: {
					backgroundColor: '#2dbdad',
					color: '#fff'
				},
				typeList: [],
				areaList: [],
				pageSize: 10,
				pageNum: 1,
				searchKey: '',
				type: '',
				scrollTop: 0
			}
		},
		methods: {
			selectType(type) {
				this.type = type;
				this.getOrderList(true)
			},
			confirm(e) {
				const province = e[0].label
				const city = e[1].label

				this.areaName1 = province
				this.areaName2 = city
				this.searchKey = province + city

				// 保存文字
				this.selectedProvince = province
				this.selectedCity = city

				// 保存索引（备用）
				this.defaultAreaIndex = e.map(item => item.index)

				this.getOrderList(true)
			},
			getAreaInfo() {
				orderApis.getAreaInfo().then((res) => {
					this.areaList = res.data.data
				})
			},
			getOrderList(flag) {
				var _this = this
				let jisuanHeight = 500
				if (flag) {
					_this.pageNum = 1
				} else {
					_this.pageNum++

					jisuanHeight = _this.pageNum * jisuanHeight
				}

				let para = {
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					areaName: _this.searchKey,
					typeName: _this.type
				}
				orderApis.getOrderList(para).then((res) => {
					if (flag) {
						_this.infoList = res.data.data.rows
					} else {
						var list = res.data.data.rows
						var oldList = _this.infoList
						if (list.length != 0) {
							for (var i = 0; i < list.length; i++) {
								var data = list[i]
								oldList.push(data)
							}

							_this.infoList = oldList
							_this.scrollTop = jisuanHeight
						}
					}
				})
			},

			getTypeList() {
				var _this = this
				localTypeApis.getList().then((res) => {
					_this.typeList = res.data.data
				})
			},
			chooseArea() {
				if (this.areaList.length > 0 && this.selectedProvince) {
					const provinceIndex = this.areaList.findIndex(p => p.label === this.selectedProvince)
					let cityIndex = 0

					if (provinceIndex !== -1) {
						const cities = this.areaList[provinceIndex].children || []
						cityIndex = cities.findIndex(c => c.label === this.selectedCity)
					}

					// 动态设置默认索引
					this.defaultAreaIndex = [provinceIndex !== -1 ? provinceIndex : 0, cityIndex !== -1 ? cityIndex : 0]
				}

				this.show = true
			},
			change(obj) {
				console.log(obj)
				//只能监听第一列
			},
			submit(obj) {
				console.log(obj)
			},
			toDetail(index) {
				//保存token
				uni.setStorageSync('orderDetail', this.infoList[index]);
				uni.navigateTo({
					url: '../detail/detail'
				});
			},
			add() {
				uni.navigateTo({
					url: '../add/add'
				});
			},
			publish() {
				uni.navigateTo({
					url: '../publish/publish'
				});
			},
			load() {
				this.getTypeList()
				this.getOrderList(true)
				this.getAreaInfo()
			}
		},
		mounted() {
			this.load()
		}
	}
</script>

<style lang="scss" scoped>
	.mian-box {
		height: 100vh;
	}

	.t-box {
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		padding: 20px 20px 0 20px;
		justify-content: space-between;
		/* 自动平分空隙 */
	}

	.t-item {
		width: 18%;
		/* 每行 5 个，预留空隙 */
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 15px;
		/* 行间距 */
	}

	.t-img {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		display: block;
		margin-bottom: 5px;
	}

	.c-box {
		margin-top: 10px;
		background-color: white;
		padding: 13px;

	}

	.f-box {
		padding: 13px;
	}

	.f-item {
		background-color: white;
		display: flex;
		padding: 2px;
		border-radius: 5px;
		margin-bottom: 10px;
		height: 104px;
	}

	.f-img {
		height: 100px;
		width: 130px;
		border-radius: 5px;
	}

	.f-txt {
		font-size: 13px;
		font-weight: bold;
		margin-left: 5px;
		margin-bottom: 5px;
		line-height: 18px;
		width: 208px;
		height: 35px;
	}

	.f-label {
		margin-left: 5px;
		display: flex;
	}

	.f-label view {
		color: white;
		// line-height: 28px;
		font-size: 13px;
		padding: 3px;
		border-radius: 2px;
		background-color: green;
		margin-right: 5px;
	}

	.f-bottom {
		margin-top: 10px;
		margin-left: 5px;
		display: flex;
		justify-content: space-between;
		color: #ababab;
		font-size: 12px;
	}

	.fu-box {
		position: absolute;
		bottom: 10px;
		width: 100%;
	}
</style>